<template>
  <div class="my_wallet">

    <div class="head">
      <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
        <template #content>
          <span>{{ t('route_page_wallet') }}</span>
        </template>
        <template #left>
          <iconpark-icon @click="router.go(-1)" class="close" icon-id="back" size="1.2rem"></iconpark-icon>
        </template>
        <template #right>
          <div class="right-handler">
            <iconpark-icon name="refresh2" :class="refreshFlag && 'refresh'" size="24" @click="refresh" />
            <iconpark-icon v-if="eyeOpen" name="eye12" size="24" @click="changeEyeOpen(false)" />
            <iconpark-icon v-else name="hide" size="24" @click="changeEyeOpen(true)" />
          </div>
        </template>
      </nut-navbar>
    </div>

    <div class="body">
      <div class="amount">
        <div class="content">
          <div class="info_base">
            <iconpark-icon name="wallrticonzr01" size="32"></iconpark-icon>
            <div>
              <span>{{ t('walletInfo_page_carry') }}</span>
              <span v-if="eyeOpen">
                <nut-price :price="gameMoney" size="small" style="color:#fff;" :decimal-digits="0" thousands
                  :need-symbol="false" />
              </span>
              <span v-else>*******</span>
            </div>
          </div>
          <div class="arrow">
            <div class="line"></div>
            <iconpark-icon :class="tranType == 'out' && 'to_out'" name="to" size="43.6"></iconpark-icon>
            <div class="line"></div>
          </div>
          <div class="info_base">
            <iconpark-icon name="wallrticonzc02" size="32"></iconpark-icon>
            <div>
              <span>{{ t('walletInfo_page_venue') }}</span>
              <span v-if="eyeOpen">
                <nut-price :price="bankMoney" size="small" style="color:#fff;" :decimal-digits="0" thousands
                  :need-symbol="false" />
              </span>
              <span v-else>*******</span>
            </div>
          </div>
        </div>
        <div class="hint">
          <iconpark-icon size="0.75rem" name="Vector"></iconpark-icon>
          {{ t('walletInfo_page_tranferTips') }}
        </div>
      </div>

      <div class="tab">
        <div :class="{ tab_ac: tranType == 'in' }" @click="changeTab('in')">
          <iconpark-icon name="wallrticontongy04" size="18"></iconpark-icon>
          {{ t('walletInfo_page_in') }}
        </div>
        <div :class="{ tab_ac: tranType == 'out' }" @click="changeTab('out')">
          <iconpark-icon name="wallrticontongy05" size="18"></iconpark-icon>
          {{ t('walletInfo_page_out') }}
        </div>
      </div>
      <swiper
				direction="horizontal"
				:autoplay="false"
				:autoHeight="true"
				:loop="false"
				:disableOnIntercation="false"
				:touchStartPreventDefault="false"
				slidesPerView="auto"
				:space-between="5"
				:centeredSlides="true"
				class="search_page_swiper"
				@swiper="onSwiperInit"
				@slideChange="handleSwiperChange"
				>
				<swiper-slide key="in">
          <div class="calc">
            <!--金额输入-->
            <div class="ipt">
              <nut-input @blur="inputBlur" @input="countMonRate" v-model="tranMoney" right-icon="123"
                :placeholder="t('walletInfo_page_tranferAmount')">
                <template #right>
                  <iconpark-icon @click="resetTranMoney" icon-id="shuaxin" size="1.5rem"></iconpark-icon>
                </template>
              </nut-input>
              <div class="all_btn button_color" @click="allTranferMon">{{ t('promo_page_all') }}</div>
            </div>
            <!--范围滑块-->
            <nut-range v-model="slideValue" @change="formatTooltip" class="range" hidden-range hidden-tag
              :disabled="!canSlide">
              <template #button>
                <div class="nut-range-button">{{ slideValue }}%</div>
              </template>
            </nut-range>
            <!--金额按钮-->
            <div class="button_list">
              <div class="kj_item" v-for="(item, index) in chooseMoneyArr" :key="index" @click="chooseFastMon(item.value)">
                <!-- :class="tranMoney == item.value && 'btn_block'" -->
                {{ item.label }}
              </div>
            </div>
          </div>

          <div class="confirm">
            <div class="button_color" @click="handleSubmit">
              {{ t('home_page_confirm') }}
            </div>
          </div>
        </swiper-slide>
        <swiper-slide key="out">
          <div class="calc">
            <!--金额输入-->
            <div class="ipt">
              <nut-input @blur="inputBlur" @input="countMonRate" v-model="tranMoney" right-icon="123"
                :placeholder="t('walletInfo_page_tranferAmount')">
                <template #right>
                  <iconpark-icon @click="resetTranMoney" icon-id="shuaxin" size="1.5rem"></iconpark-icon>
                </template>
              </nut-input>
              <div class="all_btn button_color" @click="allTranferMon">{{ t('promo_page_all') }}</div>
            </div>
            <!--范围滑块-->
            <nut-range v-model="slideValue" @change="formatTooltip" class="range" hidden-range hidden-tag
              :disabled="!canSlide">
              <template #button>
                <div class="nut-range-button">{{ slideValue }}%</div>
              </template>
            </nut-range>
            <!--金额按钮-->
            <div class="button_list">
              <div class="kj_item" v-for="(item, index) in chooseMoneyArr" :key="index" @click="chooseFastMon(item.value)">
                <!-- :class="tranMoney == item.value && 'btn_block'" -->
                {{ item.label }}
              </div>
            </div>
          </div>

          <div class="confirm">
            <div class="button_color" @click="handleSubmit">
              {{ t('home_page_confirm') }}
            </div>
          </div>
        </swiper-slide>
      </swiper>  

    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import useWalletInfo from "@/views/myWallet/useWalletInfo.ts";
import { useRouter } from "vue-router";
import { useI18n } from 'vue-i18n';
// @ts-ignore
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
const { t } = useI18n();
const router = useRouter();

// const formatter = (value: any) => value.replace(/[^0-9]/g, '');
const refresh = () => {
  refreshWallet()
}

const {
  changeEyeOpen,
  gameMoney,
  bankMoney,
  refreshWallet,
  refreshFlag,
  tranType,
  changeTranType,
  tranMoney,
  chooseMoneyArr,
  canSlide,
  formatTooltip,
  handleSubmit,
  chooseFastMon,
  eyeOpen,
  resetTranMoney,
  allTranferMon,
  slideValue,
  countMonRate,
  inputBlur,
} = useWalletInfo()

const swiperInstance = ref(null);
const onSwiperInit = (swiper: any) => {
	swiperInstance.value = swiper; // 保存 Swiper 实例
};

const handleSwiperChange = (swiper: any) => {
  changeTranType(swiper.realIndex === 0 ? 'in' : 'out');
}

const changeTab = (type: string) => {
  changeTranType(type);
  // @ts-ignore
  swiperInstance.value.slideTo(type === 'in' ? 0 : 1);
}
</script>

<style lang="scss" scoped>
.my_wallet {
  height: 100%;
  padding-top: calc(50px + env(safe-area-inset-top));
  font-weight: 400;

  .right-handler {
    display: flex;
    gap: 15px;
  }

  .head {
    background-image: url(/imgs/home/public_bg.webp);
    background-size: 80% auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }

  .refresh {
    animation: refresh 1s infinite;
  }

  @keyframes refresh {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .body {
    padding: 16px 14px;
    overflow-y: auto;
    position: relative;
  }

  .amount {
    width: 100%;
    height: 236px;
    margin: 0 0 10px;
    padding: 10px;
    background: #131232;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    border-radius: 8px;
    display: grid;
    //grid-template-rows: 201px auto;
  }

  .content {
    height: 187px;
    //margin: 0 0 15px;
    padding: 12px 0;
    border-radius: 8px;
    background: #21203D;
    box-shadow: 0.5px 0.5px 1px 0px #705E99 inset;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .info_base {
      display: flex;
      align-items: center;
      //justify-content: center;
      width: 100%;
      height: 41px;
      padding-left: 69px;

      :deep(.nut-price--small) {
        font-size: 16px;
      }
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 4px;

        &>span:first-child {
          font-weight: 500;
          font-size: 14px;
          color: #A8A8CA;
        }

        &>span:last-child {
          font-size: 16px;
          color: #fff;
        }
      }
    }

    .arrow {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      iconpark-icon {
        margin: 6px 0;

        &.to_out {
          transform: rotate(180deg);
        }
      }

      .line {
        width: 320px;
        height: 1px;
        opacity: 0.2;
        background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 40.5%, rgba(255, 255, 255, 0) 100%);
      }

      //img {
      //  width: 54px;
      //  height: 54px;
      //}
    }
  }

  .hint {
    margin-top: 15px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    transform: translateY(-8px);
    //text-align: center;
    color: #A8A8CA;
    font-size: 12px;
    min-height: 18px;

    iconpark-icon {
      margin-top: 3px;
    }
  }

  .tab {
    margin-bottom: 14px;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 .5px;

    div {
      position: relative;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #C6C4F5;
      height: 44px;

      &::after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        background: transparent;
        bottom: 0;
      }
    }

    .tab_ac {
      color: #5B6CFF;

      &::after {
        background: linear-gradient(180deg, #5B6CFF 0%, #9E1EFF 100%);
      }
    }
  }

  .calc {
    width: 100%;
    //height: 150px;

    .ipt {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .all_btn {
        width: 104px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 500;
      }

      .nut-input {
        width: 235px;
        border-radius: 8px;
        padding: 9px;
        background: #282747;
        box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
        border: 1px solid #2E296B;
      }
    }
  }

  .range {
    //width: 97%;
    width: 345px;
    //height: 18px;
    margin: 15px auto 25px auto;

    :deep() {
      .nut-range {
        &::before {
          height: 6px;
          border-radius: 7px;
          opacity: 1;
          background-color: #fff;
          transform: translateY(5px);
        }
      }

      .nut-range-bar {
        height: 6px;
        margin: 5px 20.1px 6px 0;
        border-radius: 13px;
        background: linear-gradient(90deg, #FA7800 0%, #FBCB38 100%);
      }

      .nut-range-button {
        border: 0;
        border-radius: 0;
        width: 32px;
        height: 18px;
        line-height: 18px;
        background: url(/imgs/wallet/press_btn.webp) no-repeat center;
        background-size: 100%;
        text-align: center;
        font-weight: 600;
        font-size: .6rem;
        color: #000;
      }
    }
  }

  .button_list {
    display: flex;
    flex-wrap: wrap;

    .kj_item {
      width: 110px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      margin-bottom: 10px;
      color: #fff;
      border-radius: 8px !important;
      border: none;
      background: #21203D;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

      &:not(:nth-child(3n+1)) {
        margin-left: 8px;
      }
    }
  }

  .confirm {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    div {
      width: 319px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      box-shadow: 0.5px 0.5px 1px 0 #9B9EFF inset;
    }
  }
}

:deep(.nut-navbar) {
  //margin-bottom: 0px !important;

  .nut-navbar__title {
    height: 44px;
  }
}
</style>